<template>
  <div class="home__tabs" :class="`home__tabs--${size}`">
    <div v-for="item in tabs" :key="item.value" :class="getItemClass(item)" @click="clickItem(item)">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props: {
    value: {
      type: [Number, String],
      default: '',
    },
    tabs: {
      type: Array,
      default: () => []
    },
    size: {
      type: String,
      default: 'medium',
    }
  },
  methods: {
    clickItem(item) {
      this.$emit('input', item.value);
      this.$emit('chnage', item.value);
    },
    getItemClass(item) {
      return [
        'home__tab',
        {
          'home__tab--active': item.value === this.value,
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.home__tabs {
  margin: 0 auto;
  display: inline-flex;
  &.home__tabs--mini {
    .home__tab {
      height: 30px;
      margin: 0 5px;
      padding: 0px;
    }
  }
  .home__tab {
    margin: 0 10px;
    padding: 6px 0;
    cursor: pointer;
    &.home__tab--active {
      color: #409eff;
      border-bottom: 2px solid #409eff;
    }
  }
}
</style>